<style scoped>
.host-s-code {
  margin: 12px 20px;
  position: relative;
}
.host-s-code .save {
  position: absolute;
  right: 0;
  top: 0;
}
.save {
  z-index: 10;
}
</style>
<style>
.host-s-code .el-tabs__header {
  margin: 0;
}
</style>
<!--  -->
<template>
  <div class="host-s-code">
    <div class="save">
      <el-button size="small" type="success" @click="saveCode">保 存</el-button>
    </div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="&lt;meta /&gt; 标签之后" name="first">
        <ACEDefault ref="hostMetaCode" />
      </el-tab-pane>
      <el-tab-pane label="&lt;/head&gt; 标签之前" name="second">
        <ACEDefault ref="hostEndHeadCode" />
      </el-tab-pane>
      <el-tab-pane label="&lt;body&gt; 标签之后" name="third">
        <ACEDefault ref="hostBeginBodyCode" />
      </el-tab-pane>
      <el-tab-pane label="&lt;/body&gt; 标签之前" name="fourth">
        <ACEDefault ref="hostEndBodyCode" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ACEDefault from '@/components/common/ace/Default.vue'
export default {
  created () {
    this.$nextTick(() => {
      this.$refs['hostMetaCode'].created()
      this.$refs['hostEndHeadCode'].created()
      this.$refs['hostBeginBodyCode'].created()
      this.$refs['hostEndBodyCode'].created()
    })

    this.$post('/code/get-site-code-by-site-id-type', {
      siteId: this.scode.siteId,
      type: this.scode.type
    }).then(response => {
      if (response && parseInt(response.id) > 0) {
        this.scode.beginMeta = response.beginMeta ? response.beginMeta : ''
        this.scode.endMeta = response.endMeta ? response.endMeta : ''
        this.scode.endHeader = response.endHeader ? response.endHeader : ''
        this.scode.beginBody = response.beginBody ? response.beginBody : ''
        this.scode.endBody = response.endBody ? response.endBody : ''

        this.$nextTick(() => {
          if (this.$refs['hostMetaCode']) {
            this.$refs['hostMetaCode'].loaded()
            this.$refs['hostMetaCode'].setValue(this.scode.endMeta)
          }
          if (this.$refs['hostEndHeadCode']) {
            this.$refs['hostEndHeadCode'].loaded()
            this.$refs['hostEndHeadCode'].setValue(this.scode.endHeader)
          }
          if (this.$refs['hostBeginBodyCode']) {
            this.$refs['hostBeginBodyCode'].loaded()
            this.$refs['hostBeginBodyCode'].setValue(this.scode.beginBody)
          }
          if (this.$refs['hostEndBodyCode']) {
            this.$refs['hostEndBodyCode'].loaded()
            this.$refs['hostEndBodyCode'].setValue(this.scode.endBody)
          }
        })
      }
    })
  },
  data () {
    return {
      maxSize: {
        endMeta: 102400,
        endHeader: 102400,
        beginBody: 102400,
        endBody: 102400
      },
      activeName: 'first',
      scode: {
        siteId: 0,
        type: 0,
        beginMeta: null,
        endMeta: null,
        endHeader: null,
        beginBody: null,
        endBody: null
      }
    }
  },
  methods: {
    saveCode () {
      this.scode.endMeta = this.$refs['hostMetaCode'].getValue()
      this.scode.endHeader = this.$refs['hostEndHeadCode'].getValue()
      this.scode.beginBody = this.$refs['hostBeginBodyCode'].getValue()
      this.scode.endBody = this.$refs['hostEndBodyCode'].getValue()

      if (this.scode.endMeta.length > this.maxSize.endMeta) {
        this.activeName = 'first'
        this.$message.error('<meta /> 标签之后 的代码不能超过 ' + this.maxSize.endMeta + ' 个字符')
        return
      }

      if (this.scode.endHeader.length > this.maxSize.endHeader) {
        this.activeName = 'second'
        this.$message.error('</head> 标签之后 的代码不能超过 ' + this.maxSize.endHeader + ' 个字符')
        return
      }

      if (this.scode.beginBody.length > this.maxSize.beginBody) {
        this.activeName = 'third'
        this.$message.error('<body> 标签之后 的代码不能超过 ' + this.maxSize.beginBody + ' 个字符')
        return
      }

      if (this.scode.endBody.length > this.maxSize.endBody) {
        this.activeName = 'fourth'
        this.$message.error('</body> 标签之后 的代码不能超过 ' + this.maxSize.endBody + ' 个字符')
        return
      }

      this.$refs['hostMetaCode'].loadin()
      this.$refs['hostEndHeadCode'].loadin()
      this.$refs['hostBeginBodyCode'].loadin()
      this.$refs['hostEndBodyCode'].loadin()
      this.$jpost('/code/update-site-code', this.scode).then(response => {
        if (response && parseInt(response.id) > 0) {
          this.$refs['hostMetaCode'].loaded()
          this.$refs['hostEndHeadCode'].loaded()
          this.$refs['hostBeginBodyCode'].loaded()
          this.$refs['hostEndBodyCode'].loaded()
        }
      })
    }
  },
  components: {
    ACEDefault
  }
}

</script>
